<template>
	<view>
		<van-nav-bar @click-left="$back" left-arrow title="充值记录" :border="false" />
		<scroll-view @scrolltolower="handleLower" @refresherrefresh="handleRefresh" refresher-enabled
			:refresher-triggered="trigger" scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<!-- <van-empty description="暂无充值记录~">
				<view style="width: 280rpx;">
					<van-button block round color="#db3231" @click="toPage">
						<text style="font-size: 36rpx;">去充值</text>
					</van-button>
				</view>
			</van-empty> -->
			<van-cell-group :border="false">
				<van-cell v-for="item in list" :key="item" value-class="history-value" center size="large" title="已支付(微信)" value="500.00元"
					label="2010-10-10 10:10:10" />
			</van-cell-group>
			<view class="loading-text">
				<text>{{finished && loading ? '没有更多了' : '加载中...'}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trigger: false,
				finished: false,
				loading: false,
				list: [],
				pageNo: 1,
				pageSize: 20,
				total: 8
			}
		},
		computed: {
			height() {
				return this.scrollviewHeilght - 46 + 'px'
			}
		},
		onLoad() {
			this.$slLoading().then(() => {
				this.loading = true;
				this.getList();
			})
		},
		methods: {
			getList() {
				setTimeout(() => {
					let list = [];
					for (let i = 0; i < 9; i++) {
						list.push(i + 1);
					};
					this.list = list;
					this.finished = list.length <= this.total;
					uni.hideLoading();
				}, 1000)
			},
			toPage() {
				this.$slNavigateTo('/pages/home/chargeCenter')
			},
			// 自定义下拉刷新被触发
			handleRefresh() {
				this.finished = false;
				this.trigger = true;
			},
			// 触底
			handleLower() {
				console.log('-触底');
			}
		}
	}
</script>

<style lang="scss">
	.history-value {
		color: #db3231 !important;
		font-size: 36rpx;
		font-weight: bold;
	}

	.bottom-button {
		width: 160px;
		height: 40px;
	}
</style>
<style lang="scss" scoped>
	.loading-text {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 16rpx 0;
	}
</style>
